<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"
          rel="stylesheet">
    <link href="../../assetsimages/x-icon/agricul.png" rel="shortcut icon" type="image/x-icon">
    <link href="../../assets/css/relys/animate.css" rel="stylesheet">
    <link href="../../assets/css/relys/bootstrap.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/all.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/icofont.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/lightcase.css" rel="stylesheet">
    <link href="../../assets/css/relys/swiper.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/style.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .cart-checkout-box button {
            padding: 11px 30px;
            border: 1px solid #f0f0f0;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font-size: 16px;
            border: none;
            background: #ffb11f;
            color: #fff;
            outline: none;
            border: none;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- Page Header Section Start Here -->
    <section class="page-header bg_img padding-tb">
        <div class="overlay"></div>
        <div class="container">
            <div class="page-header-content-area">
                <h4 class="ph-title">购物车</h4>
                <ul class="agri-ul">
                    <li><a href="index.html">首页</a></li>
                    <li><a class="active">购物车</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- Page Header Section Ending Here -->


    <!-- Shop Cart Page Section start here -->
    <div class="shop-cart padding-tb">
        <div class="container">
            <div class="section-wrapper">
                <div class="cart-top">
                    <table>
                        <thead>
                        <tr>
                            <th>商品</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>总价</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, i) in list">
                            <td class="product-item" style="display: flex;">
                                <!-- <input type="checkbox" name="cart" style="margin-right: 10px;" /> -->
                                <div class="p-thumb">
                                    <img :src="item.picture" alt="product">
                                </div>
                                <div class="p-content" style="width: auto;">
                                    {{item.goodname}}
                                </div>
                            </td>
                            <td>￥{{item.price}}</td>
                            <td>
                                <div class="cart-plus-minus">
                                    <div @click="onReduceTap(item)" class="dec qtybutton">-</div>
                                    <input class="cart-plus-minus-box" name="qtybutton" type="text"
                                           v-model="item.buynumber">
                                    <div @click="onAddTap(item)" class="inc qtybutton">+</div>
                                </div>
                            </td>
                            <td>￥{{item.price * item.buynumber}}</td>
                            <td>
                                <img @click="onDeleteTap(item)" alt="product" src="../../assets/images/del.png">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="cart_totals">
                    <table>
                        <tbody>
                        <tr class="order-total">
                            <th>总价</th>
                            <td>
                                <strong><span class="amount">{{totalPrice}} RMB</span></strong>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="cart-checkout-box" style="float: right;" v-if="list.length>0">
                    <button @click="onOrderTap">立即结算</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Shop Cart Page Section ending here -->
</div>
</body>
<script src="../../assets/js/relys/jquery.js"></script>
<script src="../../assets/js/relys/fontawesome.min.js"></script>
<script src="../../assets/js/relys/waypoints.min.js"></script>
<script src="../../assets/js/relys/bootstrap.min.js"></script>
<script src="../../assets/js/relys/wow.min.js"></script>
<script src="../../assets/js/relys/swiper.min.js"></script>
<script src="../../assets/js/relys/jquery.countdown.min.js"></script>
<script src="../../assets/js/relys/jquery.counterup.min.js"></script>
<script src="../../assets/js/relys/isotope.pkgd.min.js"></script>
<script src="../../assets/js/relys/lightcase.js"></script>
<script src="../../assets/js/relys/functions.js"></script>
<script src="../../assets/js/relys/vue.js"></script>
<script src="../../assets/js/api/api.js"></script>
<script src="../../assets/js/api/shop-cart.js"></script>
<script src="../../assets/js/relys/utils.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            list: [],
        },
        computed: {
            totalPrice() {
                if (this.list.length > 0) {
                    var price = 0
                    this.list.forEach(item => {
                        price += item.price * item.buynumber
                    })
                    return price
                } else {
                    return 0
                }
            }
        },
        created() {
            this.pageList()
        },
        methods: {
            pageList() {
                var _this = this;
                cartList(1, 100, function (res) {
                    _this.list = res.data.list
                })
            },
            onReduceTap(data) {
                var _this = this;
                if (data.buynumber == 1) {
                    cartDelete([data.id], function (res) {
                        _this.pageList();
                        localStorage.removeItem(`cart${data.goodid}`)
                    })
                } else {
                    data.buynumber -= 1;
                    cartUpdate(data, function (res) {
                        _this.pageList();
                    })
                }
            },
            onAddTap(data) {
                var _this = this;
                data.buynumber += 1;
                cartUpdate(data, function (res) {
                    _this.pageList();
                });
            },
            onDeleteTap(data) {
                var _this = this;
                var r = confirm("是否删除");
                if (r == true) {
                    cartDelete([data.id], function (res) {
                        _this.pageList();
                        localStorage.removeItem(`cart${data.goodid}`)
                    })
                }
            },
            onOrderTap(data) {
                let orderGoods = [];
                // 1、处理购物车内已选择的订单生成商品
                for (let i = 0; i < this.list.length; i++) {
                    orderGoods.push(this.list[i])
                }
                // 跳转到下单页面,需要购买的数据保存在缓存
                localStorage.setItem('orderGoods', JSON.stringify(orderGoods))
                // 跳转到支付页面
                window.location.href = '../order/confirm-order.html';
            }
        }
    })
</script>
</html>
